<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>151.3d魔方</title>
  </head>
  <link rel="stylesheet" href="../common.css" />
  <style>
    :root {
      --bg: #000;
      --c1: #f5e7a1;
      --c2: skyblue;
      --c3: #fff;
      --c4: #97d497;
      --c5: #801a1a;
      --c6: orange;
      --w: 30px;
      --gap: 8px;
      --allW: calc(3 * var(--w) + 4 * var(--gap));
    }
    .container {
      width: var(--allW);
      height: var(--allW);
      perspective: 900px;
    }

    .container-box {
      position: relative;
      width: var(--allW);
      height: var(--allW);
      transform-style: preserve-3d;
      animation: rotate 5s infinite alternate;
    }

    .cube-side {
      width: 100%;
      height: 100%;
      position: absolute;
      background: var(--bg);
      border-radius: 7px;
      padding: var(--gap);
      backface-visibility: hidden;
    }

    .cube-side .cube-grid {
      /* display: inline-block;
      vertical-align: top; */
      width: var(--w);
      height: var(--w);
      border-radius: calc(var(--w) / 5);
      color: var(--c);
      background: currentColor;
      box-shadow: calc(var(--w) + var(--gap)) 0 0 currentColor,
        calc(var(--w) * 2 + var(--gap) * 2) 0 currentColor,
        0 calc(var(--w) + var(--gap)) currentColor,
        calc(var(--w) + var(--gap)) calc(var(--w) + var(--gap)) currentColor,
        calc(var(--w) * 2 + var(--gap) * 2) calc(var(--w) + var(--gap))
          currentColor,
        0 calc(var(--w) * 2 + var(--gap) * 2) currentColor,
        calc(var(--w) + var(--gap)) calc(var(--w) * 2 + var(--gap) * 2)
          currentColor,
        calc(var(--w) * 2 + var(--gap) * 2) calc(var(--w) * 2 + var(--gap) * 2)
          currentColor;
      /* box-shadow: 70px 0 0 currentColor, 140px 0 currentColor,
        0 70px currentColor, 70px 70px currentColor, 140px 70px currentColor,
        0 140px currentColor, 70px 140px currentColor, 140px 140px currentColor; */
    }
    .cube-side.side-front {
      transform: translateZ(calc(var(--allW) / 2));
    }

    .cube-side.side-back {
      transform: rotateX(-180deg) translateZ(calc(var(--allW) / 2));
    }

    .cube-side.side-right {
      transform: rotateY(90deg) translateZ(calc(var(--allW) / 2));
    }

    .cube-side.side-left {
      transform: rotateY(-90deg) translateZ(calc(var(--allW) / 2));
    }

    .cube-side.side-top {
      transform: rotateX(90deg) translateZ(calc(var(--allW) / 2));
    }

    .cube-side.side-bottom {
      transform: rotateX(-90deg) translateZ(calc(var(--allW) / 2));
    }

    @keyframes rotate {
      0% {
        transform: rotateZ(0deg) rotateX(0deg) rotateY(0deg);
      }

      15% {
        transform: rotateZ(45deg) rotateX(45deg) rotateY(45deg);
      }

      30% {
        transform: rotateZ(45deg) rotateX(90deg) rotateY(90deg);
      }

      45% {
        transform: rotateZ(45deg) rotateX(135deg) rotateY(135deg);
      }

      60% {
        transform: rotateZ(45deg) rotateX(90deg) rotateY(180deg);
      }

      75% {
        transform: rotateZ(45deg) rotateX(45deg) rotateY(225deg);
      }

      100% {
        transform: rotateZ(45deg) rotateX(0deg) rotateY(270deg);
      }
    }
  </style>
  <body>
    <div class="container">
      <div class="container-box">
        <div class="cube-side side-front">
          <div class="cube-grid" style="--c: var(--c1)"></div>
        </div>
        <div class="cube-side side-back">
          <div class="cube-grid" style="--c: var(--c2)"></div>
        </div>
        <div class="cube-side side-right">
          <div class="cube-grid" style="--c: var(--c3)"></div>
        </div>
        <div class="cube-side side-left">
          <div class="cube-grid" style="--c: var(--c4)"></div>
        </div>
        <div class="cube-side side-top">
          <div class="cube-grid" style="--c: var(--c5)"></div>
        </div>
        <div class="cube-side side-bottom">
          <div class="cube-grid" style="--c: var(--c6)"></div>
        </div>
      </div>
    </div>
  </body>
</html>
